<template>
	<view class="wanl-order-list">
		<view class="navbar bg-white fixed w100">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true }" @load="load($event,'load')" @refresh="load($event,'refresh')" style="padding-top: 60rpx;">
			<view class="tab-content">
				
					<!-- 订单列表 -->
					<view v-for="(order, okey) in orderList" :key="okey" class="order-item radius-bock">
						<view class="head">
							<view class="shop wanl-gray">
								<text class="wanl-black margin-lr-xs text-30">{{ order.card.title }}</text>
								<text class="wlIcon-fanhuigengduo text-sm"></text>
							</view>
							<view class="margin-right-bj text-sm">
								<text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
							</view>
						</view>
						<!-- 商品 -->
						<view class="goods-box">
							<view class="cu-avatar xl margin-right-bj radius">
								<text class="wlIcon-jifen1 text-red"></text>
							</view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										<view class="cu-tag radius sm bg-red margin-right-xs">空间内存</view>
										{{order.card.title}}
									</view>
									<view class="wanl_sku text-min">
										<text class="wanl-gray-dark">{{order.card.desc}}</text>
									</view>
								</view>
								<view class="parameter">
									<view class="text-sm text-price text-red">
										{{ order.order_money }}
									</view>
									<view class="text-min wanl-gray">
										x 1
									</view>
								</view>
							</view>
						</view>
						<!-- 底部 -->
						<view class="price-box text-sm flex">
							<view class="margin-right-sm wanl-gray">优惠：<text class="text-price">0</text></view>
							<view>实付款：<text class="text-price">{{ order.order_money }}</text></view>
						</view>
						<view class="action-box padding-bottom-bj" v-if="order.status == 1">
							<button class="cu-btn round margin-lr-bj line-green" @tap="paymentOrder(order)">立即支付</button>
						</view>
					</view>
					
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList:[],
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '全部'
				},
				{
					state: 1,
					text: '待支付'
				},
				{
					state: 2,
					text: '已支付'
				}
			]
		};
	},
	methods: {
		load(paging,key) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			uni.request({
				url: '/member/card/getOrderLists',
				method:"POST",
				data: {
					status: state,
					page: paging.page
				},
				success: res => {
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.status));
						//演示数据所以自己进行状态筛选
						if (state === 0) {
							//0为全部订单
							return item;
						}
						return item.status === state;
					});
					if(key == 'load') {
						this.orderList = [...this.orderList, ...orderList];
						this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
					} else if(key == 'refresh') {
						console.log(orderList)
						this.orderList = orderList;
						this.$refs.list.refreshSuccess({ list: orderList, total: res.data.total });
					}
				}
			});
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.$refs.list.refreshScrollView()
			this.load({page:1},'refresh')
		},
		//支付订单
		paymentOrder(order){
			this.$wanlshop.to(`/pages/user/money/pay?id=${order.id}&type=card`);
		},
		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333';
			switch (+state) {
				case 1:
					stateTip = '等待支付';
					stateTipColor = '#f40';
					break;
				case 2:
					stateTip = '购买成功';
					break;
				case 6:
					stateTip = '已完成';
					break;
				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
.cu-custom .search-form{
	border: 3rpx solid #4CBD66;
	background-color: #fff;
}
</style>
